<template>
  <div id="home">
    <ul class="mynav">
      <li @click="navclick(0)">
        <router-link to="/home/index">
          <span class="iconfont" :class="index == 0 ? 'active' : ''"
            >&#xe638;</span
          >
          <span :class="index == 0 ? 'active' : ''"> 首页</span>
        </router-link>
      </li>
      <li @click="navclick(1)">
        <router-link to="/home/search">
          <span class="iconfont" :class="index == 1 ? 'active' : ''"
            >&#xe651;</span
          >
          <span :class="index == 1 ? 'active' : ''">搜索</span>
        </router-link>
      </li>
      <li @click="navclick(2)">
        <router-link to="/home/order">
          <span class="iconfont" :class="index == 2 ? 'active' : ''"
            >&#xe645;</span
          >
          <span :class="index == 2 ? 'active' : ''">订单</span>
        </router-link>
      </li>
      <li @click="navclick(3)">
        <router-link to="/home/my">
          <span class="iconfont" :class="index == 3 ? 'active' : ''"
            >&#xe6df;</span
          >
          <span :class="index == 3 ? 'active' : ''">我的</span>
        </router-link>
      </li>
    </ul>
    <div>
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      index: 0,
    };
  },
  methods: {
    navclick(i) {
      this.index = i;
    },
  },
  updated() {
    if (this.$route.query.index) {
      this.index = this.$route.query.index;
    }
  },
};
</script>
<style lang="scss" scoped>
.mynav {
  margin: 0;
  padding: 0;
  background-color: white;
  display: flex;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  bottom: -1px;
  position: fixed;
  z-index: 9999;
  li {
    .active {
      color: red;
    }
    padding: 7px 0;
    span {
      font-weight: bold;
      font-size: 12px;
      display: block;
    }
    span:nth-child(1) {
      margin-bottom: 5px;
      font-size: 20px;
    }
    text-align: center;
    width: 25%;
  }
}
</style>